<template>
  <div class="table_caozuo distributionSheet">
    <template v-for="(item,index) in btn">
      <el-button
        :key="index"
        @click="handler(index)"
        v-if="item.isShow"
        type="primary"
        style="margin:0 10px 20px 0"
      >{{item.title}}</el-button>
    </template>
    <avue-crud
      ref="crud"
      style="width:100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
      <template slot-scope="scope" slot="indexLabel">
        <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
      </template>
      <template slot="businessType" slot-scope="scope">
        <!-- <el-input
          :disabled="!scope.row.disabled"
          v-model="scope.row.businessType"
          class="borderNone"
        />-->
        <el-select
          v-model="scope.row.businessType"
          :disabled="scope.row.disabledEdit"
          placeholder="请选择所属业态"
          class="borderNone"
        >
          <el-option
            v-for="item in yetaiList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </template>
      <template slot="deliveryFee" slot-scope="scope">
        <el-input
          :disabled="!scope.row.disabled"
          v-model="scope.row.deliveryFee"
          class="borderNone"
        />
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" v-if="!scope.row.disabled">修改</el-button>
        <el-button @click="save(scope.row)" type="text" v-if="scope.row.disabled">保存</el-button>
        <el-button @click="del(scope.row)" type="text">删除</el-button>
      </template>
    </avue-crud>
    <template>
      <div style="width:100%;position:relative;height:50px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
  </div>
</template>

<script src='./list_table.js'></script>

<style lang="scss">
.distributionSheet {
  margin: 10px 0px;
  .borderNone {
    width: 60%;
    .el-input__inner {
      border: none;
      text-align: center !important;
      background-color: #fff !important;
      color: #000 !important;
    }
    .el-input__suffix{
      display: none;
    }
  }
}
</style>